<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<c:set var="SERVER_PATH" value="${pageContext.request.contextPath}"></c:set>

<head>
<meta charset="utf-8">
<title>服务列表</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.table {
	width: 70% !important;
	margin: 40px auto;
}

thead {
	background: #F1F1F1;
}

th, td {
	text-align: center;
	width: 200px;
}

.table tbody tr:nth-of-type(even) {
	background-color: #f1f1f1;
}

.table tbody tr:nth-of-type(ood) {
	background-color: #ffffff;
}

.thead {
	position: fixed;
	width: 70%;
	height: 40px;
	left: 15%;
	top: 0;
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	background: #F1F1F1;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	border-bottom: 1px solid #999;
	line-height: 40px;
	font-weight: bold;
	color: #333;
}

tr {
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	border-bottom: 1px solid #999;
	color: #333;
}

.thead p{
	text-align: center;
	width: 100%;
	height: 40px;
}
 td {
	text-align: center;
	width: 100%;
	flex:1;
	-moz-flex:1;
	word-wrap:break-word;
}
</style>
</head>

<body>
	<div class="thead">
		<p>客户名称</p>
		<p>合同内容</p>
		<p>合同编号</p>
		<p>金额</p>
		<p>联系人</p>
		<p>联系电话</p>
		<p>日期</p>
	</div>
	<div id="scrollContent" class='table-responsive'></div>
</body>
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var SERVER_PATH = '${SERVER_PATH}';
	function getData() {
		$.ajax({
			url : SERVER_PATH + "/psp/order/v1/serviceList",
			type : "GET",
			dataType : 'json',
			data : {
				page : 0,
				limit : 5000
			},
			success : function(data) {
				createDataTable(data)
			},
			error : function() {
				console.log('error')

			}

		})

	}
	getData();

	function createDataTable(data) {
		var dataList = data.data;
		var tableTemp = '<table class="table">';
		//tableTemp+='<thead><tr><th>客户名称</th><th>产品名称</th><th>数量</th><th>金额</th><th>承接方</th><th>日期</th></tr></thead><tbody>';
		var length = dataList.length;
		for (var i = 0; i < length; i++) {
			tableTemp = tableTemp + '<tr><td>' + dataList[i].customer
					+ '</td><td>' + dataList[i].product + '</td><td>'
					+ dataList[i].contractNo + '</td><td>' + dataList[i].price
					+ '</td><td>' + dataList[i].username
					+ '</td><td>' + dataList[i].phone + '</td><td>'
					+ dataList[i].serviceDate + '</td></tr>'
		}
		tableTemp += '</tbody></table>';
		$('#scrollContent').append(tableTemp);
		setTimeout(function() {
			autoScroll()
		}, 1000);
	}
	function autoScroll() {
		var timer = setInterval(function() {
			var position = 5;
			/* var scrollVal=$('body')[0].scrollTop+position; */
			$(document).scrollTop($(document).scrollTop() + position);
		}, 200)
		$('table')[0].onmouseover = function() {
			clearInterval(timer)
		}
		$('table')[0].onmouseout = function() {
			autoScroll()
		}
	}
</script>

</html>